<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import xxglService from '@/api/xxgl'
import { XxlbQueryResult } from '@/api/xxgl-dto'
import { ElMessage } from 'element-plus'
import xxnrDialog from './dialogs/xxnr-dialog.vue'
import { getFldm } from '@/utils/get-fldm'
import { useXxglStore } from '@/store/xxgl'
const xxStore = useXxglStore()
onMounted(async () => {
  getXxlxList()
  getXxdjList()
  changeNum(1)
})

// 消息类型
const xxlxList = ref<any[]>([])
const getXxlxList = async () => {
  xxlxList.value = await getFldm('gd057')
}
// 消息等级
const xxdjList = ref<any[]>([])
const getXxdjList = async () => {
  xxdjList.value = await getFldm('gd058')
}
/*
 * tabs切换
 */
const headerIndex = ref('0')
const headerClickChange = (value: string) => {
  if (headerIndex.value === value) return
  headerIndex.value = value
  form.value.filter.xxzt = value
  getTableData()
}

const form = ref({
  pageSize: 20,
  pageNum: 1,
  filter: {
    gjz: '',
    xxdjdm: '',
    xxlxdm: '',
    xxzt: headerIndex.value,
  },
})
/*
 * 查询消息列表
 */
const tableData = ref<XxlbQueryResult[]>([])
const total = ref(0)
const getTableData = () => {
  const params = form.value
  xxglService.queryXxList(params).then((res) => {
    tableData.value = res.data.list
    total.value = res.data.total
  })
}
// 分页
const changeNum = (val: number) => {
  form.value.pageNum = val
  getTableData()
}
const changeSize = (val: number) => {
  form.value.pageSize = val
  getTableData()
}

/*
 * 查询未读消息数量
 */
const wdsl = computed(() => xxStore.wdxxsl)
const getWdxxsl = () => {
  xxglService.getWdxxsl().then((res) => {
    xxStore.setWdxxsl(res.data.wdxxsl)
  })
}
getWdxxsl()

/*
 * 全部标记为已读
 */
const batchYd = () => {
  xxglService.updateXxztpl().then(() => {
    ElMessage.success('操作成功')
    getTableData()
    getWdxxsl()
  })
}

/*
 * 查看消息
 */
const xxnrRef = ref()
const viewXx = (row: XxlbQueryResult) => {
  xxnrRef.value?.openDialog(row)
  const params = { xxjlbh: row.xxjlbh }
  xxglService.updateXxzt(params).then(() => {
    getTableData()
    getWdxxsl()
  })
}
</script>

<template>
  <div class="container">
    <el-tabs type="card" model-value="xxlb">
      <el-tab-pane label="消息列表" name="xxlb">
        <div class="container">
          <div class="xx-header">
            <div class="btn-group">
              <button
                class="header-text"
                :class="headerIndex === '0' ? 'header-avtive' : ''"
                @click="headerClickChange('0')"
              >
                全部
              </button>
              <button
                class="header-text"
                :class="headerIndex === '1' ? 'header-avtive' : ''"
                @click="headerClickChange('1')"
              >
                未读
                <span v-if="wdsl" class="badge-content">{{ wdsl }}</span>
              </button>

              <button
                class="header-text"
                :class="headerIndex === '2' ? 'header-avtive' : ''"
                @click="headerClickChange('2')"
              >
                已读
              </button>

              <el-button class="header-action" type="primary" link @click="batchYd"
                >全部标记为已读</el-button
              >
            </div>
            <div>
              <el-form ref="ruleFormRef" :model="form.filter" label-width="75px" inline>
                <el-form-item label="消息类型">
                  <el-select
                    v-model="form.filter.xxlxdm"
                    clearable
                    placeholder="请选择"
                    style="width: 160px"
                  >
                    <el-option
                      v-for="zrritem in xxlxList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="zrritem.dm"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="消息等级">
                  <el-select
                    v-model="form.filter.xxdjdm"
                    clearable
                    placeholder="请选择"
                    style="width: 160px"
                  >
                    <el-option
                      v-for="zrritem in xxdjList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="zrritem.dm"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="关键字">
                  <el-input
                    v-model="form.filter.gjz"
                    maxlength="100"
                    placeholder="请输入消息内容/发布人"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button @click="getTableData" type="primary">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="table">
            <el-table :data="tableData" height="100%" @row-click="viewXx">
              <el-table-column prop="xxlxmc" label="" width="30">
                <template #default="scope">
                  <div>
                    <img v-if="scope.row.xxzt === '1'" src="@/assets/images/wdmsg.png" alt="" />
                    <img v-if="scope.row.xxzt === '2'" src="@/assets/images/ydmsg.png" alt="" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="xxlxmc" label="消息类型" width="180" />
              <el-table-column prop="xxdjmc" label="消息等级" width="180" />
              <el-table-column prop="xxnr" label="消息内容" show-overflow-tooltip />
              <el-table-column prop="fsrxm" label="发布人" width="120" />
              <el-table-column prop="fsrq" label="发布时间" width="160" />
            </el-table>
            <div class="page">
              <el-pagination
                v-model:current-page="form.pageNum"
                v-model:page-size="form.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="changeSize"
                @current-change="changeNum"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <xxnrDialog ref="xxnrRef" />
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100% !important;
  background-color: #fff;
  .xx-header {
    display: flex;
    justify-content: space-between;
    .header-text {
      color: #4a76ab;
      cursor: pointer;
      width: 100px;
      .badge-content {
        display: inline-block;
        height: 14px;
        font-size: 12px;
        line-height: 16px;
        color: #ffffff;
        background-color: #ff3f3f;
        border-radius: 7px;
        padding: 0px 2px;
      }
    }
    .header-text + .header-text {
      margin-left: 10px;
    }
    .header-avtive {
      color: #fff;
      background-color: #3c89d0;
    }
    .header-action {
      margin-left: 10px;
    }
  }
  :deep(.el-form-item) {
    margin-right: 10px;
  }
  .table {
    height: calc(100% - 80px);
    margin-top: 10px;
  }
  .page {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
